* {
    margin: 0;
    padding: 0;
}
.box {
    width: 500px;
    height: 500px;
    background: pink;
    /* display: flex; 简单记忆：df
        将盒子 设置为 弹性盒子  伸缩 
        1、父级 弹性盒子
        让父级变成了弹性盒子
        当父亲变成弹性盒子之后
        谁有了弹性？—— 儿子（下面的三个孩子）
        他和他的孩子可以自动缩小
    */
    display: flex;
    /* 2、flex-direction:设置主轴方向 简单记忆：fd
       给父里面指定一个方向，指的是：【排列 方向】
       站队：有横着排和竖着排，有行和列
       row:行（横着排）
       column：列（竖着排）
    */
    
    flex-direction: row;
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */

    /* 3、justify-content:对齐方式 （控制【主轴】）简单记忆：jc
        stat:开始
        end：结束
        center：居中
        space-around：均匀分配，两边留白，有空间（around，周围），用的比较多
        space-between：两端对齐，两边无留白，无空间
        space-evenly:两边和中间间距相等

        当主轴为row（横着）时，justify-content：为水平对齐方式；
        当主轴为column（竖着）时，justify-content：为垂直对齐方式
    
    */
    justify-content: space-between;

    /* 4、 换行*/
    flex-wrap: wrap;

    /* 5、当主轴为row（横着）时，align-items 为 垂直对齐方式
          当主轴为column（竖着）时，align-items 为 水平对齐方式
          【侧轴】 控制上下，垂直
            center：垂直居中
            flex-stat:上对齐
            flex-end：下对齐
    */
    align-items: center;

    /* 6、将主轴方向和换行一起设置 */
    /* flex-flow: row wrap; */
    
}
.box div {
    width: 100px;
    height: 100px;
    /* float: left; */
    flex:20%;
    margin: 0 5%;
}
.son1 {
    background: palegreen;
}
.son2 {
    background: peru;
}
.son3 {
    background: skyblue;
}
.son4 {
    background: rgb(59, 76, 232);
}
.son5 {
    background: rgb(113, 41, 221);
}
.son6 {
    background: rgb(219, 128, 220);
}